<template>
  <div class="deparments">
    <el-card>
      <el-tabs>
        <el-tab-pane label="组织架构"></el-tab-pane>
      </el-tabs>
      <div class="tree">
        <!-- 将自定义的top部门数据送给树形组件 -->
        <treeItem :item="topInfo"></treeItem>
        <hr />
        <el-tree :data="list" :props="{ label: 'name', children: 'children' }">
          <template v-slot="{ data }">
            <!-- 通过props将tree插槽内的data点击数据和获取组织架构api传递过去 -->
            <treeItem
              style="width:100%"
              :item="data"
              @getDate="getDate"
            ></treeItem>
          </template>
        </el-tree>
      </div>
      <!-- 弹框 -->
      <!-- 将部门完整数据传和获取组织架构api送给弹窗组件 -->
      <dialogItem :listInfo="listInfo" @getDate="getDate"></dialogItem>
    </el-card>
  </div>
</template>

<script>
// 导入封装的树形组件
import treeItem from './components/tree-item.vue'
// 导入弹框组件
import dialogItem from './components/dialog-itme.vue'
// 导入获取部门列表api
import { companyDepartment } from '@/api/departments.js'
export default {
  components: {
    treeItem,
    dialogItem
  },
  data () {
    return {
      topInfo: {
        name: '传智大学深圳校区',
        manager: '负责人',
        isTop: true, // 定义个布尔值,通过v-if判断布尔值,从而渲染操作的个数
        id: ''
      },
      list: [],
      listInfo: [] // 保存完整数据,用来筛选添加子部门
    }
  },
  created () {
    this.getDate()
  },
  methods: {
    // 获取组织架构部门列表
    async getDate () {
      const res = await companyDepartment()
      console.log('组织架构部门列表:', res)
      this.listInfo = res.data.depts // 完整数据
      this.list = this.changeDate(res.data.depts, '')
      this.topInfo.name = res.data.companyName
    },
    // 定义一个转换树形结构数据的方法
    changeDate (arr, str) {
      // 根据返回res部门列表数据可得出规律:所有项的pid===父级的id,所以最外层的项的pid='',可以先筛选出最外层的项
      return arr.filter(item => {
        if (item.pid === str) {
          // 再给每一项新增一个children数组
          item.children = this.changeDate(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deparments {
  font-size: 14px;
  padding: 20px;
  .el-card {
    padding: 20px 30px;
    .tree {
      width: 80%;
      margin: 0 auto;
      padding-top: 40px;
    }
  }
}
</style>
